<script lang='ts' setup name='Father'>
import { ref } from 'vue'
import Child from './Child.vue'


const tableData = ref([

{ id:'001',name:'张飞'},
{ id:'002',name:'刘备'},
{ id:'003',name:'关羽'},
{ id:'004',name:'诸葛亮'}


])

</script>

<template>


        <div class="fatherComponent">
                <h3>我是父元素,演示slot插槽</h3>
                <Child :tableData="tableData">
                        <template  v-slot:default>
                                <h3>用户表格????</h3>
                        </template>


                       <template v-slot:footer>
                                 <h3>最后更新时间：2024年4月17日13:36:19</h3>
                       </template>


                       <template v-slot:btnSlot="scope">
                                <button>用户修改:{{ scope.rowData.id }}</button>
                       </template>

                </Child>


                <Child :tableData="tableData">

                        <h3>学生表格</h3>
                </Child>


                <Child :tableData="tableData">
                        <template  #default>
                                <h3>菜单菜单列表</h3>
                        </template>


                       <template #footer>
                        <h3>最后更新时间：2024年4月17日13:36:29</h3>                      
                         </template>

                       
                         <template v-slot:btnSlot="scope">
                                <button>菜单修改:{{ scope.rowData.id }}</button>
                       </template>
                </Child>
        </div>





</template>

<style scoped></style>